
$(document).ready(function(){  

	$('.input-file').on('click', 'button',function() {
	    $(this).closest('.input-file').find('input[type="file"]').click(); 
	});
	
	$('input[type=file]').change(function () {
		var _files = this.files;
		//console.log($(this));
		var html = $("#show-image").html();
		if ( navigator.userAgent.indexOf('Firefox') !== -1 ) {
		    $.each(this.files, function(i,val){
		    	console.log(_files[i].mozFullPath);
		    	console.log(_files[i]);
		    	html += "<div class='name'>" + _files[i].name + "</div><input type='hidden' name='sendfile[]' value='" + _files[i].mozFullPath + "'>";
		    });
		} else {
			$.each($(this), function(i,val){
				var fileName = $(this).val().split('/').pop().split('\\').pop();
				html += "<div class='name'>" + fileName + "</div><input type='hidden' name='sendfile[]' value='" + $(this.val) + "'>";
		    });
		}
	    $("#show-image").html(html);
		
		
	});	

	
	
	$('.input-file').click(function() {
//	    $(this).closest('.input-file').find('input[type="file"]').click(function(){
//	    		alert("asd");
//	    });
		
		
	});	
	
	var arr_files = {};
    $("#fileupload").bind("fileuploaddone", function (e, data) {
		
    	$.each(data.result.files, function (index, file) {
    		
    		if(arr_files[file.name] == undefined){
    			$("#personal-thumb").append('<img src="/personal/files/thumbnail/' + file.name + '" style="padding-right:2px;">');	
    		}

    	});    		
    	
    
    });    
    
    
    
    $('#fileupload').bind('fileuploaddestroy', function (e, data) {
    	var file = decodeURIComponent(data.url.substring(data.url.indexOf("=") + 1));
    	$("#personal-thumb").children().each(function(){
    		if($(this).attr("src") == '/personal/files/thumbnail/' + file){
    			$(this).remove();
    		}
    	});
    	
    });
    
     $("#personal-thumb").on({
        mouseleave: function(e){
        	$("#personal-thumb").find(".personal-thumb-action").remove();     		
        }    	
     });
     

     $("#personal-thumb img").on({
         mouseenter: function(e){
        	 $("#personal-thumb").find(".personal-thumb-action").remove();
        	 var pos = $(this).position(); 
        	 var left = pos.left - 20;
        	 var arr_id = $(this).attr("src").split('/');
        	 var id = "";
        	 $.each(arr_id, function(i,j){
        		 id = j;
        	 });
      		 $( this ).after("<div class='personal-thumb-action' style='left:" + left + "px;'><ul><li class='person-delete' id='" + id + "'>x Delete</li><ul></div>");
      		}	
      });
     
     
     $(document).on("click", ".person-delete", 
    	  function(){
    	 	var id = $(this).attr('id');
    	 	$("#personal-thumb img").each(function(){
    	 		if($(this).attr("src") ==  '/personal/files/thumbnail/' + id){
    	 			$(this).remove();
    	 			$(".personal-thumb-action").hide();
    	 			// Ajax request
    	 		}
    	 	});
     });
     

     
    
});  